<template>
  <el-container style="padding: 15px">
    <el-header height="120px">
      <el-form size="small" label-width="80px">
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <el-form-item label="不动产类型" label-width="90px">
              <el-select v-model="searchObj.projectId">
                <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目编号">
              <el-input v-model="searchObj.reportId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input v-model="searchObj.reportName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="估价目的">
              <el-select v-model="searchObj.objectiveId">
                <el-option v-for="item in objectiveList" :key="item.id" :label="item.reportObjectiveName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <el-form-item label="用途">
              <el-select v-model="searchObj.useId">
                <el-option v-for="item in useList" :key="item.id" :label="item.reportUseName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报告类型">
              <el-select v-model="searchObj.reportTypeId">
                <el-option v-for="item in typeList" :key="item.id" :label="item.reportTypeName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目状态">
              <el-select v-model="searchObj.reportLeafId">
                <el-option v-for="item in projectStatusList" :key="item.id" :label="item.leafName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="getPage">搜索</el-button>
              <el-button @click="resetPage">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-divider />
    <el-main>
      <el-table v-loading="listLoading" :data="reportAuditList">
        <el-table-column label="不动产类型" prop="projectName" width="90px" />
        <el-table-column label="项目编号" prop="reportId" width="120px">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="toDetails(scope.row.id)">{{ scope.row.reportId }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" prop="reportName" width="300px" :formatter="subName" />
        <el-table-column label="用途" prop="reportUseName" width="60px" />
        <el-table-column label="估价目的" prop="reportObjectiveName" width="80px" />
        <el-table-column label="报告类型" prop="reportTypeName" />
        <el-table-column label="项目状态" prop="leafName" width="140px" />
        <el-table-column label="审核状态" prop="auditStatus">
          <template v-slot="scope">
            <el-tag v-if="scope.row.auditStatus === 1" type="success">未审核</el-tag>
            <el-tag v-if="scope.row.auditStatus === 2" type="info">审核中</el-tag>
            <el-tag v-if="scope.row.auditStatus === 3" type="warning">审核通过</el-tag>
            <el-tag v-if="scope.row.auditStatus === 4" type="danger">审核未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="passAuditReport(scope.row, 3)">通过</el-button>
            <!--            <el-button type="text" size="small" @click="passAuditReport(scope.row, 4)">退回</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  auditPassReport,
  myReportAuditList,
  searchFlowPoolPage,
  searchFormCacheListAudit,
  updateReportLeaf
} from '@/api/flow'
import { validObj } from '@/utils/validate'
import { ellipsisString } from '@/utils'

export default {
  name: 'MyAudit',
  data() {
    return {
      searchObj: {},

      projectList: [],
      objectiveList: [],
      useList: [],
      typeList: [],
      projectStatusList: [],

      sizePage: 10,
      currentPage: 1,
      totalPage: 0,

      reportAuditList: [],

      listLoading: false
    }
  },

  created() {
    this.init()
  },

  computed: {
    ...mapGetters([
      'id'
    ])
  },

  methods: {
    handleSizeChange(val) {
      this.sizePage = val
      this.getPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPage()
    },

    init() {
      this.getPage()
      this.getFormList()
    },
    getPage() {
      const searchObj = this.searchObj
      const id = this.id
      this.listLoading = true
      if (validObj(searchObj)) {
        searchFlowPoolPage(searchObj, id, this.currentPage, this.sizePage).then(res => {
          const data = res.data
          this.reportAuditList = data.list
          this.totalPage = data.total
        }).finally(() => {
          this.listLoading = false
        })
      } else {
        myReportAuditList(id, this.currentPage, this.sizePage).then(res => {
          const data = res.data
          this.reportAuditList = data.list
          this.totalPage = data.total
        }).finally(() => {
          this.listLoading = false
        })
      }
    },

    toDetails(id) {
      this.$router.push({ path: '/report/details', query: { id: id }})
    },

    async audit(data, num) {
      await updateReportLeaf(data, num).then(res => {
        this.$message.success(res.message)
        this.getPage()
      })
    },

    passAuditReport(data) {
      this.$confirm('确认之后将修改报告的审核状态，并且自动生成审核记录，继续吗？', '通过审核', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(res => {
        const id = this.id
        const id1 = data.id
        auditPassReport(id1, id).then(res => {
          this.$message.success(res.message)
          this.getPage()
        })
      })
    },

    getFormList() {
      searchFormCacheListAudit().then(res => {
        const data = res.data
        this.projectList = data.projects
        this.objectiveList = data.objectives
        this.useList = data.uses
        this.typeList = data.types
        this.projectStatusList = data.statuses
      })
    },

    resetPage() {
      this.searchObj = {}
      this.currentPage = 1
      this.sizePage = 10
      this.getPage()
      // 重置成功提示框
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    },

    subName(row, column, cellValue, index) {
      return ellipsisString(cellValue)
    }
  }
}
</script>

<style scoped>

</style>
